<template>
  <div class="post-list" style="padding:100px 20px 0px 20px">
    <div class="toolbar" style="float: left;width: 100%">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="60px">
        <el-form-item label="标题" prop="title">
          <el-input
              v-model="queryParams.title"
              placeholder="标题"
              clearable
          />
        </el-form-item>
        <el-form-item label="摘要" prop="excerpt">
          <el-input
              v-model="queryParams.excerpt"
              placeholder="摘要"
              clearable
          />
        </el-form-item>
        <el-form-item label="类别" prop="category">
          <el-input
              v-model="queryParams.category"
              placeholder="类别"
              clearable

          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search"  @click="handleQuery">搜索</el-button>
          <el-button :icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="success" :icon="Plus"  @click="addNew">新增博文</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="queryParams.postList" border style="width: 100%">
        <el-table-column align="center" label="标题">
          <template #default="scope">
            <router-link :to="{path:'/post',query:{id:scope.row.id}}">
              {{ scope.row.title }}
            </router-link>
          </template>

        </el-table-column>
        <el-table-column align="center" prop="excerpt" label="摘要"/>
        <el-table-column align="center" label="发布日期" width="150">
          <template #default="scope">{{ dateFormat(scope.row.pub_date) }}</template>
        </el-table-column>
        <el-table-column align="center" prop="pageview" label="浏览量" width="80"/>
        <el-table-column align="center" prop="read_time" label="阅读时间" width="90"/>
        <el-table-column align="center" label="类别" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.category !==null" style="margin-left: 5px" :type="color[scope.row.category.id%5]"
                    :effect="'dark'">{{ scope.row.category.name }}
            </el-tag>
            <el-tag v-else type="info">
              未分类
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标签" width="200">
          <template #default="scope">
            <el-tag style="margin-left: 5px" v-for="(item,index) in scope.row.tags" :type="color[index]">
              {{ item.name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="文章状态" width="90">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 0" :type="'info'" :effect="'plain'">草稿</el-tag>
            <el-tag v-if="scope.row.status == 1" :type="'success'" :effect="'plain'">发布</el-tag>
            <el-tag v-if="scope.row.status == 2" :type="'danger'" :effect="'plain'">加密</el-tag>
            <el-tag v-if="scope.row.status == 3" :type="'warning'" :effect="'plain'">置顶</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="240">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status!=0"
                size="small"
                type="danger"
                @click="updateStatus('0',scope.row)">取消发布</el-button>
            <el-button size="small" type="success" @click="updateStatus('1',scope.row)" v-else> 发布</el-button>
            <el-button  v-if="scope.row.status==1" size="small" type="warning" @click="updateStatus('3',scope.row)">置顶</el-button>
            <el-button  v-else-if="scope.row.status==3" size="small" type="info" @click="updateStatus('1',scope.row)">取消置顶</el-button>
            <el-button v-if="scope.row.status==0" size="small" type="danger" @click="handleDelete(scope.row)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="queryParams.total>0"
          :total="queryParams.total"
          :page="queryParams.pageNum"
          :limit="queryParams.pageSize"
          @pagination="paginationRecall"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {Search, Refresh, Plus} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {dateFormat} from '@/utils/utils'
import {computed, onMounted, ref} from "vue";
import Pagination from "@/components/3rdPart/AdminPagination.vue";
import {getPostList,deletePost,patchPost} from "@/api/admin";
import {useRouter} from "vue-router";

const router = useRouter()

const color = ref(['', 'success', 'info', 'warning', 'danger'])

const queryParams = ref({
  postList: [],
  total: 0,
  pageNum: 1,
  pageSize: 10,
  title: null,
  excerpt: null,
  category: null,
  tag: null,
})

onMounted(() => {
  getList()
})

function paginationRecall(val: any) {
  queryParams.value.pageNum = val.page
  queryParams.value.pageSize = val.limit
  getList()
}

function getList() {
  getPostList({'pageNum': queryParams.value.pageNum, 'pageSize': queryParams.value.pageSize}).then((res) => {
    queryParams.value.total = res.data.count
    queryParams.value.postList = res.data.results
  })
}

function handleEdit(row:any){
  router.push({ path: '/postEditor', query: { id: row.id ,edit: true}})
}

function handleDelete(row:any){
  deletePost(row.id).then((res) =>{
    ElMessage({
        message: '删除成功！',
        type: 'success',
    })
    getList()
  })
}

function updateStatus(sta:any,row:any){
  let data = null;
  if(sta==="3"){
    data = {status:sta,is_top : true}
  }else{
    data = {status:sta,is_top : false}
  }
  patchPost(data,row.id).then((res) => {
      ElMessage({
        message: '操作成功',
        type: 'success',
      })
      getList()
    }).catch((error) => {
      ElMessage({
        message: error,
        type: 'error',
      })
    });
}

/** 搜索按钮操作 */
function handleQuery() {

}

/** 重置按钮操作 */
function resetQuery() {

}

function addNew(){
  router.push({ path: '/postEditor'})
}
</script>

<style scoped>
.el-row {
  width: 100%;
}
</style>